<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar title="我的" class="titleTop">
      <template #right>
        <van-icon :name="require('../assets/imgs/齿轮.png')" size="24" />
      </template>
    </van-nav-bar>
    <!-- 用户 -->
    <van-card>
      <template #title>
        <div class="name">欢迎您,{{ username }}</div>
      </template>
      <template #thumb>
        <van-image
          :src="require('../assets/imgs/头像.jpg')"
          class="headerP"
        ></van-image>
      </template>
      <template #price>
        <van-cell is-link class="id" round>
          <template #title>
            <div>萤火ID: {{ id }}</div>
          </template>
        </van-cell>
      </template>
      <template #num>
        <van-cell is-link class="medal" round @click="exit">
          <template #title>
            <div>退出登录</div>
          </template>
        </van-cell>
      </template>
    </van-card>
    <!-- 钱包 -->
    <van-grid column-num="5">
      <van-grid-item text="米金">
        <template #icon>227</template>
      </van-grid-item>
      <van-grid-item text="优惠卷">
        <template #icon>0</template>
      </van-grid-item>
      <van-grid-item text="红包">
        <template #icon>0元</template>
      </van-grid-item>
      <van-grid-item text="最高额度">
        <template #icon>20万元</template>
      </van-grid-item>
      <van-grid-item text="钱包">
        <template #icon>
          <van-image :src="require('../assets/imgs/钱包2.png')" width="30px" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 会员 -->
    <van-image :src="require('../assets/imgs/会员.jpg')" class="img" />
    <!-- 收藏 -->
    <van-row type="flex" justify="center">
      <van-col offset="1" span="6"><span class="collect">收藏</span> 0</van-col>
      <van-col offset="1" span="6"
        ><span class="collect">足迹</span> 100</van-col
      >
      <van-col offset="1" span="6"><span class="collect">关注</span> 0</van-col>
    </van-row>
    <!-- 宫格 -->
    <van-grid column-num="5" class="grid">
      <van-grid-item
        :icon="require('../assets/imgs/待付款.png')"
        text="待付款"
      />
      <van-grid-item
        :icon="require('../assets/imgs/待收货.png')"
        text="待收货"
      />
      <van-grid-item :icon="require('../assets/imgs/评价.png')" text="待评价" />
      <van-grid-item
        :icon="require('../assets/imgs/退换货.png')"
        text="退换/售后"
      />
      <van-grid-item
        :icon="require('../assets/imgs/_订单.png')"
        text="全部订单"
      />
    </van-grid>
    <!-- 官网服务 -->
    <van-cell is-link value="查看更多">
      <template #title>
        <div class="title">官网服务</div>
      </template>
    </van-cell>
    <van-grid column-num="4">
      <van-grid-item
        v-for="item in icons"
        :key="item.id"
        :icon="item.url"
        :text="item.text"
      />
    </van-grid>
    <!-- 底部图片 -->
    <van-image :src="require('../assets/imgs/底部图片.jpg')" width="390px" />
    <!-- 实现底部导航栏 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "My",
  components: {
    Tabbar,
  },
  data() {
    return {
      username: "",
      id: "",
      icons: [
        {
          id: 1,
          url: require("../assets/imgs/安装.jpg"),
          text: "一键安装",
        },
        {
          id: 2,
          url: require("../assets/imgs/退换.jpg"),
          text: "一键退换",
        },
        {
          id: 3,
          url: require("../assets/imgs/维修.jpg"),
          text: "一键维修",
        },
        {
          id: 4,
          url: require("../assets/imgs/服务进度.jpg"),
          text: "服务进度",
        },
        {
          id: 5,
          url: require("../assets/imgs/小米之家.jpg"),
          text: "萤火之家",
        },
        {
          id: 6,
          url: require("../assets/imgs/客服.jpg"),
          text: "客服中心",
        },
        {
          id: 7,
          url: require("../assets/imgs/电视.jpg"),
          text: "电视安装",
        },
        {
          id: 8,
          url: require("../assets/imgs/电池.jpg"),
          text: "手机电池",
        },
      ],
    };
  },
  mounted() {
    this.username = sessionStorage.getItem("username");
    this.id = sessionStorage.getItem("id");
  },
  methods: {
    // 退出
    exit() {
      this.$router.replace({
        path: "/",
      });
    },
  },
};
</script>

<style scoped>
/* 标题栏 */
.titleTop {
  background: #fafafa;
}
/* 标题 */
.title {
  font-size: 18px;
}
/* 头像 */
.van-card__thumb /deep/ img {
  border-radius: 50%;
}
/* 头像框 */
.headerP {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px;
  border: 1px solid #e0e0e0;
  border-radius: 150px;
}
/* 用户名 */
.name {
  font-size: 24px;
}
/* id */
.id {
  background: #ede1e1;
  border-radius: 30px;
  height: 40px;
  width: 140px;
  font-size: 16px;
}
/* 勋章 */
.medal {
  background: #ede1e1;
  border-radius: 30px;
  height: 40px;
  font-size: 16px;
}

/* 宫格 */
/* 图片 */
.img {
  width: 390px;
  height: 105px;
}
/* 收藏 */
.collect {
  color: #b0b0b0;
}
</style>